import 'package:flutter/material.dart';
import 'package:x3_base_core/x3_base_core.dart';
import 'package:x3_component_core/x3_component_core.dart';

class BusinessDepotStyleDetailsHeader extends StatefulWidget {

  BusinessDepotStyleDetailsHeader({Key key, @required this.styles, this.colorId, this.itemPress}) : super(key: key);

  final List<dynamic> styles;

  final String colorId;

  final Function(String styleId) itemPress;

  @override
  _BusinessDepotStyleDetailsHeaderState createState() => _BusinessDepotStyleDetailsHeaderState();

}

class _BusinessDepotStyleDetailsHeaderState extends State<BusinessDepotStyleDetailsHeader> with TickerProviderStateMixin {

  String _currentColorId;

  @override
  void initState() {
    dynamic style = widget.styles[0];
    this._currentColorId = widget.colorId ?? style['colorId'];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return BaseCardComponent(
      child: Container(
        width: double.infinity,
        color: Colors.white,
        alignment: Alignment.centerLeft,
        child: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Row(
            children: widget.styles.map((item) => _buildItem(item)).toList()
          ),
        ),
      ),
    );
  }

  Widget _buildItem(dynamic item) {
    String colorId = BaseUtils.getKeyData(item, 'colorId').toString();
    String styleSKCImg = BaseUtils.getKeyData(item, 'styleSKCImg').toString();
    String colorName = BaseUtils.getKeyData(item, 'colorName').toString();
    Color textColor = colorId == _currentColorId ? Theme.of(context).textTheme.bodyText1.color : Theme.of(context).textTheme.bodyText2.color;
    return Container(
      margin: EdgeInsets.only(right: 12.0),
      padding: EdgeInsets.all(8),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(2),
        border: Border.all(color: colorId == _currentColorId ? Color(0xFFFF004F) : Colors.transparent),
      ),
      child: InkWell(
        onTap: () => _itemPress(colorId),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            BaseImageComponent(imageUrl: styleSKCImg, width: 40.0, height: 40.0, circular: 4),
            Text(colorName, style: Theme.of(context).textTheme.bodyText2.copyWith(color: textColor)),
          ],
        ),
      ),
    );
  }

  _itemPress(String colorId) {
    setState(() {
      _currentColorId = colorId;
    });
    widget.itemPress(colorId);
  }

}
